@import "_variables";
@import "_mixins";

footer {
  width: 100%;
  margin-top: 72px;
  border-top: 1px solid #E9ECEF;
  color: #868E96;
  font-size: 14px;
  line-height: 150%;

	p {
		width: 100%;
	}

	@include dark-mode {
		border-color: rgba(255, 255, 255, 0.1);
	}
}

.footer-inner {
	display: flex;
	flex-direction: row;
	padding: 26px;
}

@include dark-mode {
	.color-scheme-switch{
		&:after {
			left: 50%;
			margin-right: 5px;
			transform: translateX(100%);
			border-radius: 32px 96px 96px 32px;
		}

		.selector {
			left: 33px;
		}
	}
}

.color-scheme-switch {
	position: relative;
	width: 60px;
	height: 30px;
	line-height: 16px;
	background-color: var(--color-scheme-switcher-color);
	border-radius: 15px;
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
	display: flex;
	border: none;
	transition: all 200ms ease-in-out;

	&:hover {
		background-color: #000;
	}

	@include dark-mode {
		box-shadow: 0 0 0 1px rgba(#fff, 0.3);
	}

	svg {
		pointer-events: none;
		user-select: none;

		&.sun {
			color: $color-6;
			margin: 4px 0;
			margin-left: 2px;
			width: 22px;
			height: 22px;
		}

		&.moon {
			width: 16px;
			height: 16px;
			color: white;
			margin: 7px;
		}
	}

	.selector {
		@include transition-timing;
		transition-property: left;
		background-color: #fff;
		position: absolute;
		left: 3px;
		top: 3px;
		bottom: 0;
		border-radius: 50%;
		width: 24px;
		height: 24px;
	}
}
